<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>所有员工</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script th:src="@{/js/staff.js}"></script>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-body">
        <!--                    搜索-->
        <form role="form" class="form-inline">
            <div class="form-group">
                <label for="searchName">姓名</label>
                <input type="text" class="form-control" id="searchName" name="name" placeholder="请输入姓名">
            </div>
            <div class="form-group">
                <button type="button" onclick="searchByName()" class="btn btn-primary">开始搜索</button>
                <a href="javascript:void(0)" class="btn  btn-primary" onclick="loadPage('addStaffPage')">添加员工</a>
            </div>
        </form>
    </div>
</div>
<!--
    列表展示
-->
<div class="table-responsive">
    <table class="table table-striped ">
        <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>部门</th>
            <th>学历</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="staffList">
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>女</td>
            <td>1990-09-09</td>
            <td>研发</td>
            <td>研究生</td>
            <td>
                <div class="btn-group">
                    <a href="" class="btn btn-info">修改</a><a href="" class="btn btn-danger">删除</a>
                </div>

            </td>
        </tr>

        </tbody>
    </table>
</div>
<!--            翻页-->
<ul class="pagination" style="float: right;">
    <li><a href="#">&laquo;</a>
    </li>
    <li class="active"><a href="#">1</a>
    </li>
    <li class="disabled"><a href="#">2</a>
    </li>
    <li><a href="#">3</a>
    </li>
    <li><a href="#">4</a>
    </li>
    <li><a href="#">5</a>
    </li>
    <li><a href="#">&raquo;</a>
    </li>
</ul>
</body>
</html>